<template>
  <view class="detail_input_wapper">
    <view class="diw_left">{{ title }}</view>
    <view :class="textalignright ? 'diw_right' : 'diw_center'" ref="inputBoxRef">
      <input ref="inputRef" :value="value" :type="type" :maxlength="maxlength" :disabled="disabled" :placeholder="placeholder" @input="onInput" />
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: [String, null, undefined],
      default: '标题',
    },
    value: {
      type: [String, null, undefined],
      default: '',
    },
    maxlength: {
      type: [Number, null, undefined],
      default: 100,
    },
    disabled: {
      type: [Boolean, null, undefined],
      default: false,
    },
    placeholder: {
      type: [String, null, undefined],
      default: '请输入内容',
    },
    // 是否居右对齐
    textalignright: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    onInput({ detail }) {
      this.$emit('update:value', detail.value)
    },
  },
}
</script>

<style lang="scss" scoped>
.detail_input_wapper {
  width: 100%;
  height: 90rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 30rpx;
  font-weight: 500;
  position: relative;
  &::after {
    content: ' ';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-bottom: 1rpx solid #e6e6e6;
  }
  .diw_left {
    width: 200rpx;
    color: #666666;
  }
  .diw_center {
    text-align: left;
    flex: 1;
    color: #333333;
  }
  .diw_right {
    text-align: right;
    flex: 1;
    color: #333333;
  }
}
</style>
